// import React, { useEffect, useState } from 'react';
// import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
// import { Flex, message, Upload } from 'antd';
// import './UpAvater.css'
// import {useDispatch} from 'react-redux' 
// import {setImg} from '../../storage/slice/userSlice'

//   // 头像上传

// const getBase64 = (img, callback) => {
//     const reader = new FileReader();
//     reader.addEventListener('load', () => callback(reader.result));
//     reader.readAsDataURL(img);
// };
// // 限制条件
// // const beforeUpload = (file) => {
// //     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
// //     if (!isJpgOrPng) {
// //         message.error('只能上传 JPG或PNG 图片!');
// //     }
// //     const isLt2M = file.size / 1024 / 1024 < 2;
// //     if (!isLt2M) {
// //         message.error('图片必须小于 2MB!');
// //     }
// //     return isJpgOrPng && isLt2M;
// // };



// const UpAvatar = () => {
    // const dispatch = useDispatch()
//     const [loading, setLoading] = useState(false);
//     const [imageUrl, setImageUrl] = useState();
//     const [target, setTarget] = useState()

//     const userinfo = JSON.parse(localStorage.getItem("user"));
//     let { id } = userinfo
//     const handleChange = (info) => {
//         if (info.file.status === 'uploading') {
//             setLoading(true);
//             return;
//         }
//         if (info.file.status === 'done') {
//             getBase64(info.file.originFileObj, (url) => {
//                 setLoading(false);
//                 setImageUrl(url);
//                 dispatch(setImg(url))


//             });
//         }
//     };
//     const uploadButton = (
//         <button
//             style={{
//                 border: 0,
//                 background: 'none',
//             }}
//             type="button"
//         >
//             {loading ? <LoadingOutlined /> : <PlusOutlined />}
//             <div
//                 style={{
//                     marginTop: 8,
//                 }}
//             >
//             </div>
//         </button>
//     );
//     return (
//         <Flex gap="middle" wrap>
//             <Upload
//                 name="file"
//                 listType="picture-card"
//                 className="avatar-uploader"
//                 showUploadList={false}
//                 action={`http://8.137.157.16:9002/users/avatar_upload?id=${id}`}
//                 // beforeUpload={beforeUpload}
//                 onChange={handleChange}
//             >
//                 {imageUrl ? (
//                     <img
//                         src={imageUrl}
//                         alt="avatar"
//                         style={{
//                             width: '100%',
//                         }}
//                     />
//                 ) : (
//                     uploadButton
//                 )}
//             </Upload>

//         </Flex>
//     );
// };
// export default UpAvatar;


import './UpAvater.css'
import {useDispatch} from 'react-redux' 
import {setImg} from '../../storage/slice/userSlice'
import React, { useEffect, useState } from 'react';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { Flex, message, Upload } from 'antd';

const getBase64 = (img, callback) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
};
// 限制条件
// const beforeUpload = (file) => {
//     const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
//     if (!isJpgOrPng) {
//         message.error('只能上传 JPG或PNG 图片!');
//     }
//     const isLt2M = file.size / 1024 / 1024 < 2;
//     if (!isLt2M) {
//         message.error('图片必须小于 2MB!');
//     }
//     return isJpgOrPng && isLt2M;
// };

const UpAvatar = () => {
    const dispatch = useDispatch()
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();
    const [target, setTarget] = useState()

    const userinfo = JSON.parse(localStorage.getItem("user"));
    let { id } = userinfo
    const handleChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                setImageUrl(url);
                dispatch(setImg(url))
            });
        }
    };
    const uploadButton = (
        <button
        style={{
            border: 0,
            background: 'none',
            padding: 0, // 添加padding属性以去除默认的内边距
        }}
        type="button"
    >
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </button>
    );
    return (
        <Flex gap="middle" wrap>
            <Upload
                name="file"
                listType="picture-card"
                className="avatar-uploader"
                showUploadList={false}
                action={`http://8.137.157.16:9002/users/avatar_upload?id=${id}`}
                // beforeUpload={beforeUpload}
                onChange={handleChange}
            >
                {imageUrl ? (
                    <img
                        src={imageUrl}
                        alt="avatar"
                        style={{
                            width: '100%',
                        }}
                    />
                ) : (
                    uploadButton
                )}
            </Upload>

        </Flex>
    );
};
export default UpAvatar;